<template>
	<view>
		<view class="artisterPhoto artisterBox">
			<view class="row-between ">
				<text class="artisterInfoTitle">私密视频（仅VIP会员可见）</text>
				<text @click="goNavPage('/myPages/pages/editVIPVideo')">编辑</text>
			</view>
			<view style="padding:10rpx;text-align:center;" v-if="UserVipVideos !== null">
				<view style="margin:20rpx;" v-for="(item,index) in UserVipVideos" :key="index">
					<video :src="item" style="width:300rpx;height:200rpx"></video>
				</view>
			</view>
		</view>


		<view class="artisterPhoto artisterBox">
			<view class="row-between ">
				<text class="artisterInfoTitle">私密相册（仅VIP会员可见）</text>
				<text @click="goNavPage('/myPages/pages/editVIPPhoto')">编辑</text>
			</view>
			<view class="artVipPics" style="position: relative;" v-if="UserVipPhotos.length > 0">
				<view class="" v-for="(item,index) in UserVipPhotos" :key="index">
					<view class="artVipPic" v-if="index < 4">
						<image :src="item.Photos[0]" mode="aspectFill"></image>
					</view>
				</view>

				<view class="artPicCount" v-if="UserVipPhotos.length > 4">
					<uni-icons type="image" size="14" color="#fff"></uni-icons>
					<text style="margin-left: 5rpx;">{{count(UserVipPhotos) }}</text>
				</view>
			</view>
		</view>

		<view class="artisterPhoto artisterBox">
			<view class="row-between ">
				<text class="artisterInfoTitle">我的优势（仅VIP会员可见）</text>
				<text @click="goNavPage('/myPages/pages/editmyyoushi')">编辑</text>
			</view>
			<view style="padding-top:20rpx;display: flex;flex-direction: row;flex-wrap: wrap;"
				v-if="ArtisterInfo.YoushiLabels && ArtisterInfo.YoushiLabels !== null">
				<view class="label" style="width:auto;padding-left:10rpx;padding-right:10rpx"
					v-for="(item,index) in JSON.parse(ArtisterInfo.YoushiLabels)" :key="index">
					{{ item.text }}
				</view>
				<view class="label" style="clear:both;width:auto;padding-left:10rpx;padding-right:10rpx"
					v-if="ArtisterInfo.OtherYoushi">{{ ArtisterInfo.OtherYoushi }}</view>
			</view>
		</view>

		<view class="artisterPhoto artisterBox">
			<view class="row-between ">
				<text class="artisterInfoTitle">自我介绍（仅VIP会员可见）</text>
				<text @click="goNavPage('/myPages/pages/editVipMemo')">编辑</text>
			</view>
			<view style="background-color:#FFF;padding:15rpx;margin-top:30rpx;color:#999" v-if="ArtisterInfo.VipMemo">
				{{ ArtisterInfo.VipMemo }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ArtisterID: 0,
				ArtisterInfo: {},
				UserVipVideos: [],
				UserVipPhotos: [],
				UserYoushiLabels: []
			};
		},
		onLoad(options) {
			this.ArtisterID = options.artisterID;
		},
		onShow() {
			this.getArtister()
		},
		methods: {
			count(list) {
				let num = 0;
				for (let i = 0; i < list.length; i++) {
					num += list[i].Photos.length;
				}
				return num;
			},
			goNavPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			getArtister() {
				this.$httpost('/Artister/info', {
					ArtisterID: this.ArtisterID,
					ShowType: ''
				}).then(res => {
					// console.log('info', res)
					if (res.code == 200) {
						this.ArtisterInfo = res.data.ArtisterInfo;
						if (JSON.parse(res.data.ArtisterInfo.UserVipVideos) != null) {
							this.UserVipVideos = JSON.parse(res.data.ArtisterInfo.UserVipVideos);
						}
						if (JSON.parse(res.data.ArtisterInfo.UserVipPhotos) != null) {
							this.UserVipPhotos = JSON.parse(res.data.ArtisterInfo.UserVipPhotos);
						}
						if (JSON.parse(res.data.ArtisterInfo.UserYoushiLabels) != null) {
							this.UserYoushiLabels = JSON.parse(res.data.ArtisterInfo.UserYoushiLabels);
						}

						// console.log(this.UserVipPhotos);
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.row-between {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.artisterBox {
		// height:auto;
		padding: 20rpx;
		background-color: #FFF;
		margin-top: 15rpx;
	}

	.artisterInfoTitle {
		font-weight: bold;
		font-size: 30rpx;
	}

	.label {
		// float:left;
		width: 120rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		border: 1rpx solid #CCC;
		border-radius: 10rpx;
		font-size: 24rpx;
		margin: 10rpx;
	}

	.artVipPics {
		clear: both;
		display: flex;
		// justify-content: space-between;
		margin-top: 10rpx;
	}

	.artVipPic {
		width: calc((100vw - 120rpx) / 4);
		height: 300rpx;
		background-color: #999;
		margin: 10rpx
	}

	.artVipPic image {
		width: 100%;
		height: 100%
	}

	.artPicCount {
		position: absolute;
		z-index: 999;
		bottom: 10rpx;
		right: 5px;
		width: 60rpx;
		height: 30rpx;
		padding: 5rpx;
		background-color: rgba(0, 0, 0, 0.3);
		color: #FFF;
		text-align: center;
		border-radius: 10rpx;
		font-size: 20rpx;
	}
</style>